<template>
  <div class="menus">
    <ul>
      <li>
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/newBooks">新书</router-link>
      </li>
      <li>
        <router-link to="/list">特价书</router-link>
      </li>
      <li>
        <router-link to="/material">教材</router-link>
      </li>
      <li>
        <router-link to="/listen">试听教程</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Menus",
};
</script>

<style scoped>
.menus {
  width: 100%;
}
.menus ul {
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}
.menus ul li {
  margin-right: 2px;
  list-style: none;
  flex: 1;
  line-height: 50px;
  border-radius: 6px;
  background: linear-gradient(
    to top,
    rgba(0, 68, 255, 0.925) 40%,
    rgba(60, 121, 236, 0.952) 60%
  );
  background-size: 100% 200%;
  background-position: right top;
  transition: 2s;
}
.menus ul li:hover {
  background-position: right bottom;
}
.menus ul li:nth-child(5) {
  margin-right: 0px;
}
a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration-line: none;
  color: #ffffff;
}
</style>
